<template>
	<div>
		<Header />
		<div class="lg_body_wrap" id="homeData">
			<div class="lg_body_content">
				<div class="lg_left">
					<div class="lg_ring">
						<BannerPhone :imgArray='bannerData' />
					</div>
					<div class="lg_levels" id="vue_det">

						<div class="lg_s" v-for="(item,index) in categoryArray">
							<div class="lg_nav nav_s">
								<router-link class='nav_title' :to="{ path: '/CategoryLookMore', query: { type: item.type }}">{{item.title}}</router-link>
								<div class="nav_s_more">
									<router-link :to="{ path: '/CategoryLookMore', query: { type: item.type }}">查看更多></router-link>
								</div>
							</div>
							<div class="lg_content">
								<ul id="levelContainer" ref="lgcontentUlRef">
									<li v-for="(lidata,tnum) in getLeveProducts(item.items)" v-bind:style="getCellStyle(tnum)">
										<router-link :to="{ path: '/WorkDetail', query: { productId: lidata.id }}">
											<img :width="levelCellWidth - 2" :height="(levelCellWidth -2)/630*831" :src="lidata.thumUrl" />
										</router-link>
										<div class="lg_title">
											<router-link :to="{ path: '/WorkDetail', query: { productId: lidata.id }}">
												{{lidata.name}}
											</router-link>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<!-- 推荐列表 -->
						<div class="lg_s" v-if="randomlistData.length > 0">
							<div class="lg_nav nav_s">
								<router-link class='nav_title' :to="{ path: '/CategoryLookMore', query: { type: -3 }}">推荐作品</router-link>
								<div class="nav_s_more">
									<router-link :to="{ path: '/CategoryLookMore', query: { type: -3 }}">查看更多></router-link>
								</div>
							</div>
							<div class="lg_content">
								<ul id="levelContainer" ref="lgcontentUlRef">
									<li v-for="(lidata,tnum) in getLeveProducts(randomlistData)" v-bind:style="getCellStyle(tnum)">
										<router-link :to="{ path: '/WorkDetail', query: { productId: lidata.id }}">
											<img :width="levelCellWidth - 2" :height="(levelCellWidth -2)/630*831" :src="lidata.thumUrl" />
										</router-link>
										<div class="lg_title">
											<router-link :to="{ path: '/WorkDetail', query: { productId: lidata.id }}">
												{{lidata.name}}
											</router-link>
										</div>
									</li>
								</ul>
							</div>
							<div class="cpl_more" v-if="isLoadingMore">加载中...</div>
							<div class="cpl_nomore" v-if="paginationVo.lastPage">没有更多了 o(╥﹏╥)o</div>
						</div>

					</div>
					<div class="lg_a"></div>
				</div>
				<!-- <HomeAd :adList='adList'></HomeAd> -->
			</div>

		</div>
		<!-- <Footer /> -->
	</div>
</template>

<script>
	import Header from './pages/Header.vue'
	import Footer from './pages/Footer.vue'
	import HomeAd from './HomeAd.vue'
	import BannerPhone from './BannerPhone.vue'
	import HTTPUtil from '../js/HttpUtil.js'
	import SLMUtil from '../js/SLMUtil.js'
	import CookieUtil from '../js/CookieUtil.js'
	import $ from 'jquery'
	import UserInfoManager from "../js/UserInfoManager.js"

	export default {
		components: {
			Header,
			Footer,
			BannerPhone,
			HomeAd
		},
		data() {
			return {
				bannerData: [],
				categoryArray: [],
				adList: [],
				site: "",
				levelCellWidth: 104,
				levelCellNum: 9,
				randomlistData: [],
				isLoadingMore: false,
				paginationVo: {
					"pageSize": 9,
					"pageNo": 1,
					"firstResult": 0,
					"nextPage": 0,
					"prePage": 0,
					"totalCount": 0,
					"totalPage": 0,
					"firstPage": true,
					"lastPage": true
				},
			}
		},
		mounted() {

			let allwidth = $("#vue_det").width()
			// allwidth = this.$refs.lgcontentUlRef.$el.clientWidth;
			//console.log('llllllkkkkkk总宽度:' + allwidth)

			let that = this;
			$(window).resize(function() {
				console.log("jquery level监听到窗口变化");
				that.updateCellWidth();
			});

			this.getAdAndBanner()
			this.getProductList()
			this.getRecommendList(false)
			this.addListingScrollToBottom()
		},
		methods: {
			addListingScrollToBottom: function() {
				let that = this;
				let wrap = document.getElementById("homeContent")
				wrap.onscroll = function() {


					//变量scrollTop是滚动条滚动时，距离顶部的距离
					var scrollTop = wrap.scrollTop + 195; //加一个图片的高度
					//console.log("1scrollTop:"+scrollTop);
					//变量windowHeight是可视区的高度
					var windowHeight = wrap.clientHeight;
					//console.log("windowHeight:"+windowHeight);
					//变量scrollHeight是滚动条的总高度
					var scrollHeight = wrap.scrollHeight;
					//console.log("scrollHeight:"+scrollHeight);
					if (scrollTop + windowHeight >= scrollHeight) {
						//到了这个就可以进行业务逻辑加载后台数据了
						console.log("到了底部");
						that.getRecommendList(true)
					}
				}
			},
			getRecommendList: function(LoadMore) {
				if (this.isLoadingMore) {
					//正在加载中...
					return
				}
				if (LoadMore == true && this.paginationVo.lastPage) {
					//已经是最后一页--仍然继续上拉
					return;
				}
				var nowPage = this.paginationVo.pageNo
				if (LoadMore) {
					nowPage = nowPage + 1
				} else {
					nowPage = 1;
				}
				let that = this
				if (!UserInfoManager.isLogined()) {
					console.log("用户未登录，无法推荐作品")
					return
				}
				let sessionkey = UserInfoManager.getInfo().userExt.sessionKey

				var params = new URLSearchParams();
				params.append('sessionkey', sessionkey);
				params.append('pageNumber', this.paginationVo.pageNo);
				params.append('pageSize', this.paginationVo.pageSize);

				console.log('请求参数：' + this.activeChapterId + 'pid:' + this.productId)
				HTTPUtil.post('product/randomlist.do', params)
					.then(response => {
						// console.log('图片s：' + JSON.stringify(response.data));

						if (response.data.code == 0) {
							let data = response.data.data;
							if (nowPage > 1) {
								that.randomlistData = that.randomlistData.concat(data);
							} else {
								that.randomlistData = data;
							}

							that.paginationVo = response.data.paginationVo
							that.$nextTick(() => { //下次DOM更新执行
								console.log("DOM 更新了,让父frame刷新高度+++++++");
								that.updateCellWidth();
							})
						}
					})
					.catch(function(error) {
						that.isRequesting = false
						console.log(error);
					});
			},
			getAdAndBanner: function() {
				let that = this
				// 获取banner
				HTTPUtil.get('home/getadAndBanner.do', null)
					.then(response => {
						console.log('bannerdata:' + response.data);
						if (response.data.code == 0) {
							let data = response.data.data;

							that.bannerData = data.banner.items;
							that.adList = data.Ad.items;
							that.updateCellWidth();
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			getProductList: function() {
				let that = this
				HTTPUtil.get('home/getProducts.do', null)
					.then(response => {
						console.log('作品列表')
						console.log(response.data);
						if (response.data.code == 0) {
							let data = response.data.data;
							that.categoryArray = data.Category;

							that.$nextTick(() => { //下次DOM更新执行
								//console.log("DOM 更新了,让父frame刷新高度+++++++");
								that.updateCellWidth();
							})
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			updateCellWidth: function() { //更新所有cell宽度
				//从多少个开始适配
				let array = this.getCellFineWidth(15)
				if (array) {
					let width = array[0]
					let num = array[1]

					this.levelCellWidth = width
					this.levelCellNum = num

					//console.log('leve----每行个数:' + num + "cell宽度:" + width)
				}

			},
			getCellFineWidth: function(num) { //获取cell最适合宽度

				let allwidth = $("#levelContainer").width()
				// allwidth = this.$refs.lgcontentUlRef.$el.clientWidth;
				//console.log('总宽度:' + allwidth)
				if (typeof(allwidth) == "undefined") {
					console.log('组件总宽度未定义啊')
					return;
				}
				if (allwidth > 0) {
					let padding = 10 //间距
					let cellW = (allwidth - padding * (num - 1)) / num
					if (cellW >= 104) {
						return [cellW, num]
					} else {
						return this.getCellFineWidth(num - 1)
					}
				}
				return null
			},
			getCellStyle: function(index) {
				// console.log("当前cell序号index:"+index);
				if (index % this.levelCellNum == 0) { //每行 第一个
					// console.log('这是第一个:index:'+index+'余数:'+(index % this.levelCellNum))
					return {
						width: this.levelCellWidth + 'px'
					}
				} else {
					return {
						width: this.levelCellWidth + 'px',
						'margin-left': '10px'
					}
				}
			},
			getLeveProducts: function(items) { //切掉不够显示一行的作品

				//多了的作品数
				let remain = items.length % this.levelCellNum
				if (items.length > 2 && items.length > this.levelCellNum && remain <= this.levelCellNum / 2.0) {
					let tItems = [].concat(items)
					// let tItems = JSON.parse(JSON.stringify(items))
					var removeIndex = items.length - remain
					//删除多余作品
					tItems.splice(removeIndex)
					return tItems
				}
				return items
			}
		}

	}
</script>

<style scoped>
	@import "../css/Home.css";
</style>
